﻿cms.Plugins.ImageGallery = function () {

    function _updateCurrentImage(galleryID, newImageFile) {
        var gallery = _imageGalleries["gallery" + galleryID];
        gallery.currentImage.src = newImageFile;
    }

    function _showAdjacentImage(galleryID, step) {
        // Get the gallery object
        var gallery = _imageGalleries["gallery" + galleryID];
        // Get the url currently displayed in currentImage
        var currentFile = gallery.currentImage.src; // Returns a full url with domain, modify it below
        currentFile = /^.*?:\/\/.*?(\/)(.*)$/.exec(currentFile)[2]; // Remove http://www.domain.com:port/
        // Get the next/prev image in the array, loop if first/last
        var i;
        for (i = 0; i < gallery.imageFiles.length; i++) {
            if (currentFile == gallery.imageFiles[i])
                break;
        }
        i += step;
        if (i < 0)
            i = gallery.imageFiles.length - 1;
        if (i >= gallery.imageFiles.length)
            i = 0;
        // Get progress indicator div
        var progressIndicator;
        var allDivs = gallery.currentImage.parentNode.getElementsByTagName("div");
        for (var n = 0; n < allDivs.length; n++) {
            if (allDivs[n].className == "imageGalleryProgressIndicator") {
                progressIndicator = allDivs[n];
                break;
            }
        }
        // Set the position of progress indicator
        progressIndicator.style.position = "absolute";
        progressIndicator.style.zIndex = 666;
        var top = $(gallery.currentImage).position().top + (gallery.currentImage.parentNode.offsetHeight - progressIndicator.offsetHeight) / 2 * 0.7;
        var left = $(gallery.currentImage).position().left + (gallery.currentImage.parentNode.offsetWidth - progressIndicator.offsetWidth) / 2;
        progressIndicator.style.top = top + "px";
        progressIndicator.style.left = left + "px";
        // Hide the navigation
        gallery.hlPrev.style.display = "none";
        gallery.hlNext.style.display = "none";
        // Set up a way to find the gallery object from the callbacks
        gallery.currentImage.setAttribute("galleryID", gallery.id);
        // Create the nextImage object and append it to the container div
        var nextImg = document.createElement("img");
        nextImg.setAttribute("galleryID", gallery.id);
        nextImg.style.display = "none";
        nextImg.style.position = "absolute";
        nextImg.style.top = $(gallery.currentImage).position().top + "px";
        nextImg.style.left = $(gallery.currentImage).position().left + "px";
        gallery.currentImage.parentNode.appendChild(nextImg);
        // Setup the event chain
        $(nextImg).bind("load", function () {
            $(this).fadeIn(400, function () {
                var gallery = _imageGalleries["gallery" + this.getAttribute("galleryID")];
                $(gallery.currentImage).bind("load", function () {
                    var gallery = _imageGalleries["gallery" + this.getAttribute("galleryID")];
                    gallery.hlPrev.style.display = "block";
                    gallery.hlNext.style.display = "block";
                    gallery.currentImage.parentNode.removeChild(nextImg);
                    $(gallery.currentImage).unbind("load");
                    window.setTimeout(function () { progressIndicator.style.left = -10000 + "px"; }, 0);
                });
                gallery.currentImage.src = this.src;
            });
        });
        // Fire the event chain by loading the next/prev image into nextImage
        nextImg.src = gallery.imageFiles[i];



        //gallery.currentImage.src = gallery.imageFiles[i];
    }

    function _showNext(galleryID) {
        _showAdjacentImage(galleryID, 1);
    }

    function _showPrevious(galleryID) {
        _showAdjacentImage(galleryID, -1);
    }

    var _imageGalleries = {};

    function _init(galleryID, currentImageClientID, hlPrevClientID, hlNextClientID, imageFiles, fadeDuration) {
        _imageGalleries["gallery" + galleryID] = {
            id: galleryID,
            currentImage: document.getElementById(currentImageClientID),
            hlPrev: document.getElementById(hlPrevClientID),
            hlNext: document.getElementById(hlNextClientID),
            imageFiles: imageFiles,
            fadeDuration: fadeDuration
        };
    }

    return {
        Init: _init,
        UpdateCurrent: _updateCurrentImage,
        ShowNext: _showNext,
        ShowPrevious: _showPrevious
    }

} ();

